<template>
	<view class="page">
		<view class='containerView'>
		 <view class="topTipBox">
		    <view  class="textTitle">
		      {{language.bugPackage.tip1}}： 
		    </view>
		    <view  class="textContent" style="text-indent: 2em">
				{{language.bugPackage.tip2}}
		    </view>
		  </view>
		  
		  <view class="contentBox">
				<view class="tipTitle">
					<image :src="imgBaseUrl+'/images/phone/item1.png'" class="tipImg" mode="heightFix"></image>
					年套餐
				</view>
				<view class='row1 rechargeNum'>
				    <view  :class="packageId==1 ? 'actText':'normalText'" style="border-radius: 85rpx;" @click="changePackage(1,)">
				        <view style="margin-top: 15rpx;font-size: 60rpx;" class="money">{{'￥160'}}</view>
						<view class="flex">
							<view class="year" style="margin-right: 20rpx;">{{'160分钟/月'}}</view>
							<view class="min">{{'有效期一年'}}</view>
						</view>
				    </view> 
				</view>
				<view class="redTip">
					※一年套餐有效期自购买之日起至一年后
				</view>
				<view class="tipTitle">
					<image :src="imgBaseUrl+'/images/phone/item1.png'" class="tipImg" mode="heightFix"></image>
					加量包 <text> (￥0.15/分钟)</text>
				</view>
				<view class="flexRow">
				    <view :class="item.id==packageId ? 'actText addPackItem':'normalText addPackItem'" v-for="(item,index) in packageArr" 
							  :key="index" @click="changePackage(item.id,item)">
				    <view class="money">￥{{item.money}}</view>
				    <view class="year">{{item.time}}</view>
				    </view> 
				</view>
				<view class="redTip">
					※加量包到期日与年套餐到期日相同
				</view>
				<view class='payStyle'>
				  <view class='payTitle'>{{language.bugPackage.label1}}</view>
				  <view class='nextPayStyle'>
				    <view></view>
				    <view>{{language.bugPackage.label2}}</view>
				    <view></view>
				  </view>
				</view>
				<view class='chargenow'>
				  <button class="" @click='topup'>{{language.bugPackage.btn}}</button>
				</view>
				<view class="hisRowArr text">
								  {{language.bugPackage.label3}}
							  <view class="hisRow"  v-for="(item,index) in historyArr"   :key="index">
									  <view class="info">
										  <view class="type activeText">
											  {{item.createDate}}
										  </view>
										  购买了  <text class="activeText"><text v-if="item.packageName=='加量包'">{{item.amount}}</text> {{item.packageName}}</text>
									  </view>
							  </view>
				</view>
		  </view>
		</view>
	</view>
</template>

<script>
	import {getRechargeRecordApi,telRechargeApi} from '@/common/api/commonApi/phoneApi.js'
	export default {
		data() {
			return {
				packageName: '',
				historyArr:[],
				packageArr:[
					{
						id: '2',
						money: 30,
						time : '200分钟',
					},
					{
						id: '3',
						money: 60,
						time : '400分钟',
					},
					{
						id: '4',
						money: 90,
						time : '600分钟',
					},
				],
				packageId: '',
				SelectAmount: '',
				clickBool: false,
				selectInfoAccount: uni.getStorageSync('selectInfoAccount')
			}
		},
		methods: {
			changePackage(id,item){
				this.packageId = id
				if(item){
					this.SelectAmount = item.money
				}else{
					this.SelectAmount = 160
				}
				console.log(this.SelectAmount);
			},
			topup: function(param) {
				if(!this.packageId) return this.setMessage('请选择套餐或者加量包')
				if(this.clickBool) return
				this.clickBool = true
				telRechargeApi({
					usid: this.selectInfoAccount.id,
					// usid: '1771107644199706625',
					// xxbm: this.selectInfoAccount.departmentId,
					xxbm: this.xxbm,
			        retype: 1, //充值类型 钱包0 话费1
			        rechargeamount: this.SelectAmount, //充值金额
			        // packageName: '1年', 
					openid : uni.getStorageSync('openId'),
					type: this.packageId==1 ? 1 : 2
			    }).then(res=>{
					uni.requestPayment({
						provider: 'wxpay',
						nonceStr :  res.model.nonce_str,
						package : `prepay_id=${res.model.prepay_id}`,
						paySign : res.model.sign,
						signType : 'MD5',
						timeStamp: String(res.model.timeStamp),
						success:() =>{
							this.getHistoryArr().then(res=>{
								this.setMessage('支付成功')
							})
						},
						fail: (err) => {
							console.log(err);
							this.setMessage('支付取消或失败')
						}
					})
				}).finally(()=>{
					this.clickBool = false
				})
			  },
			  getHistoryArr () {
				  let data = {
				  	usid: this.selectInfoAccount.id,
				  	// usid: '1771107644199706625',
				  	// xxbm: this.selectInfoAccount.departmentId,
				  	xxbm: this.xxbm,
				  }
				return getRechargeRecordApi(data).then(res=>{
					res.rows.forEach(item=>{
					  item.createDate = this.dateformat(item.createDate)
					})
					this.historyArr = res.rows
				})
			  },
		},
		onLoad() {
			this.setPageTitle(this.language.bugPackage.title)
		},
		onShow() {
			this.getHistoryArr()

		},
	}
</script>

<style lang="scss" scoped>
.page{
	background-image: url('https://ecard.dglemin.com.cn:55005/images/phone/bg.png');
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	min-height: 100vh;
}
.containerView {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 20rpx;
}

.detail {
  width: 100%;
  background-color: #fff;
}

.rechargeNum{
	width: 100%;
	height: 170rpx;
	border-radius: 85rpx !important;
}

.detail>view {
  display: flex;
  height: 45px;
  line-height: 45px;
  font-size: 15px;
}

.toppicker {
  border-top: 1px solid #dcdcdc;
}

.detail>view>view {
  border-bottom: 1px solid #dcdcdc;
}

.detail>view>view:nth-child(1) {
  width: 30%;
  padding-left: 15px;
  color: #323232;
}

.detail>view>view:nth-child(2) {
  width: 70%;
  color: #666;
}

.rechargeDate {
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  border-bottom: 1px solid #dcdcdc;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rechargeDate>text:nth-child(1) {
  padding-left: 15px;
  color: #333;
  font-size: 14px;
  padding-right: 2px;
}

.rechargeDate>text:nth-child(2) {
  color: #fe415c;
  font-size: 12px;
  padding-left: 2px;
}

.rechargeAmount {
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #dcdcdc;
  text-align: center;
}

.rechargeAmount>text:nth-child(1) {
  color: #fe415c;
  font-size: 18px;
  padding-right: 2px;
}

.rechargeAmount>text:nth-child(2) {
  color: #333;
  font-size: 14px;
  padding-left: 2px;
}

.row1, .row2 {
  display: flex;
  width: 93%;
  margin-left: auto;
  margin-right: auto;
}

.row1>view {
  /* width: 33.33%; */
  /* height: 60px; */
  width: 100%;
  padding: 5px 5px 5px 5px;
}

.row2>view {
  width: 33.33%;
  /* height: 60px; */
  padding: 5px 5px 10px 5px;
}

.row1>view>button, .row2>view>button {
  background-color: #fff;
  border-color:1px solid #4089f0;
  height: 120rpx;
  overflow: inherit !important;
  display: flex;
  align-items: center;
  /* line-height: 60px; */
}

.year{
  font-size: 32rpx;
  // font-weight: 600;  
  flex: 1;
  /* height: 50rpx; */
  /* padding-top: 40rpx; */
}
.min{
  // flex: 1;
  font-size: 32rpx;
  /* height: 50rpx; */
}
.money{
  font-weight: 600;
  // flex: 1;
  font-size: 50rpx;
}
/* button::after{
  border: 1px solid #4089f0 !important;
} */

.payStyle{
}
.nextPayStyle {
  height: 55px;
  line-height: 55px;
  display: flex;
  background-color: #fff;
}

.payTitle {
  font-size: 15px;
  // padding-left: 25px;
  height: 30px;
  line-height: 30px;
  border-bottom: 2rpx solid #efefef;
}

.nextPayStyle>view:nth-child(1) {
  background-image: url('https://ecard.amass.com.cn/image/weixinpay.png');
  background-position: center center;
  background-repeat: no-repeat;
  width: 80px;
}

.nextPayStyle>view:nth-child(2) {
  width: 100%;
}

.nextPayStyle>view:nth-child(3) {
  background-image: url('https://ecard.dglemin.com.cn:55005/images/phone/item2.png');
  background-position: center center;
  background-repeat: no-repeat;
  width: 80px;
  transform: scale(0.5);
}

.chargenow {
  width: 580rpx;
  height: 140rpx;
  margin-left: auto;
  margin-right: auto;
  height: fit-content;
  line-height: 30px;
  margin-top: 20px;
}

.chargenow>button {
  background-color: #00a2ea;
  color: #fff;
  border-radius: 70rpx;
}
.customizeView{
  display: flex;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10rpx;
  height: 35px;
  line-height: 35px;
}
.customizeView>text{
  font-size: 15px;
  color: rgb(82, 76, 76);
  padding-left: 8px;
}
.customize_input{
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    border: 1px;
    border-style: solid;
    border-radius: 5px;
    border-left-color: #c7bebe;
    border-bottom-color: #c7bebe;
    border-top-color: #c7bebe;
    border-right-color: #c7bebe;
}
.pageTypeBtn{
  background: #fff !important;
  border: 1px solid #4089f0 !important;
  color: #4089f0 !important;
}

.bottomview{
  display: flex;
  font-size: 16px;
  font-family: sans-serif;
  color: #5a5745;
  margin-top: 10rpx;
  box-sizing: border-box;
  padding: 5rpx 10rpx;
}

.actText{
  color: #fff !important;
  background: #0ed290 !important;
  // border: 1px solid #dcb874 !important;
  width: 300rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20rpx;
  padding: 20rpx;
}

.normalText{
  color: #fefefe;
  width: 300rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20rpx;
  padding: 20rpx;
  color: #fff;
  background: #00a2ea;
  .money{
		font-weight: 600;
  }
  .year{
  }
}

.hisRowArr{
	margin-top: 30rpx;
	width: 93%;
	line-height: 40rpx;
	border-bottom: 2rpx solid #e7e7e7;
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	color: #aaaaaa;
	font-size: 26rpx;
	background: #fff;
}
.hisRow{
  line-height: 40rpx;
  border-bottom: 2rpx solid #e7e7e7;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 93%;
}
.hisRow .info{
  display: flex;
}
.text{
	color: #aaaaaa;
	font-size: 26rpx;
}
.activeText{
	color: #3a92dd;
	font-size: 28rpx;
}

.tipTitle{
	color: #00a3ea;
	font-size: 36rpx;
	font-weight: 600;
	width: 100%;
	padding: 20rpx 0 10rpx 30rpx;
	border-bottom: 2rpx solid #efefef;
	margin-bottom: 25rpx;
	display: flex;
	align-items: center;
	.tipImg{
		height: 26rpx;
		margin-right: 5rpx;
	}
	text{
		font-size: 26rpx;
	}
}
.redTip{
	// color: #d9021c;
	// font-size: 36rpx;
	width: 100%;
	padding: 20rpx 0 20rpx 30rpx;
}
.flexRow{
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	padding: 10rpx 0;
	.addPackItem{
		width: 29%;
	}
}

.topTipBox{
	background-color: #fefefe;
	padding-bottom: 20rpx;
	padding-top: 25rpx;
	border-radius: 20rpx;
	width: 670rpx;
	height: 150rpx;
	padding-left: 40rpx;
	.textTitle{
		font-weight: 600;
		font-size: 36rpx;
		color: #00a3ea;
		margin-bottom: 10rpx;
	}
	.textContent{
		font-size: 30rpx;
	}
}

.contentBox{
	margin-top: 30rpx;
	background-color: #fefefe;
	padding: 0rpx 20rpx 20rpx;
	border-radius: 20rpx;
	width: 670rpx;
	
}
.flex{
	display: flex;
}
</style>
